<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		*{ margin:0;padding: 0; }
		#wrap{ width: 990px; height: 450px; margin: 30px auto; }
		.top .img{ width: 324px; overflow: hidden; }
		.bottom .img{ width: 160px; overflow: hidden; }
		.bottom .img>img{ display: block; }
		.img:hover p{ bottom: 0; transition: all 0.5s ease; }
		.con div{ position: relative; float: left; margin: 2px; }
		.con div p{ position: absolute; left:0; bottom:-40px; width:100%;height:40px;background: rgba(33,33,33,0.5); }
		.con div p img{ display:block; margin: 9px auto; }

	</style>
</head>
<body>
	<div id="wrap">
		<div class="con top">
			<div class="img">
				<img src="images/pic1.jpg" alt="" />
				<p><img src="images/button.png" alt="" /></p>
			</div>
			<div class="img">
				<img src="images/pic2.jpg" alt="" />
				<p><img src="images/button.png" alt="" /></p>
			</div>
			<div class="img">
				<img src="images/pic3.jpg" alt="" />
				<p><img src="images/button.png" alt="" /></p>
			</div>
		</div>
		<div class="con bottom">
			<div class="img">
				<img src="images/pic4.jpg" alt="" />
				<p><img src="images/button.png" alt="" /></p>
			</div>
			<div class="img">
				<img src="images/pic5.jpg" alt="" />
				<p><img src="images/button.png" alt="" /></p>
			</div>
			<div class="img">
				<img src="images/pic6.jpg" alt="" />
				<p><img src="images/button.png" alt="" /></p>
			</div>
			<div class="img">
				<img src="images/pic7.jpg" alt="" />
				<p><img src="images/button.png" alt="" /></p>
			</div>
			<div class="img">
				<img src="images/pic8.jpg" alt="" />
				<p><img src="images/button.png" alt="" /></p>
			</div>
			<div class="img">
				<img src="images/pic9.jpg" alt="" />
				<p><img src="images/button.png" alt="" /></p>
			</div>

		</div>
	</div>
</body>
</html>